<!-- src/components/Layout.vue -->
<template>

    <div class="layout-container">
        <!-- 左侧菜单 -->
        <t-menu theme="light" default-value="item2" :collapsed="collapsed" class="sidebar-menu" expandMutex>
            <!-- Logo -->
            <template #logo>
                <div class="logo-container">

                    <t-icon name="cabbage" :size="collapsed ? '50' : '30'" v-if="!collapsed" />

                    <h3 v-if="!collapsed"> 知识管理</h3>
                    <t-icon :name="iconName" :size="collapsed ? '50' : '30'" @click="changeCollapsed" />
                </div>
            </template>

            <!-- 菜单组遍历 -->
            <t-menu-group v-for="(group, gIndex) in ToolViewLeftMenu" :key="gIndex" :title="group.title">
                <!-- 一级菜单项遍历 -->
                <template v-for="item in group.children" :key="item.value">
                    <!-- 普通菜单项 -->
                    <t-menu-item v-if="item.type === 'item'" :value="item.value" :to="item.value">
                        <template #icon v-if="item.icon">
                            <t-icon :name="item.icon" />
                        </template>
                        {{ item.label }}
                    </t-menu-item>

                    <!-- 带二级的子菜单 -->
                    <t-submenu v-else-if="item.type === 'submenu'" :value="item.value" :title="item.label">
                        <template #icon v-if="item.icon">
                            <t-icon :name="item.icon" />
                        </template>
                        <t-menu-item
                            v-for="subItem in item.type === 'submenu' && 'children' in item ? item.children : []"
                            :key="subItem.value" :value="subItem.value" :to="subItem.value">
                            {{ subItem.label }}
                        </t-menu-item>
                    </t-submenu>
                </template>
            </t-menu-group>
        </t-menu>
        <!-- 右侧内容 -->
        <div class="main-content">
            <router-view />
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ButtonProps } from 'tdesign-vue-next';
const collapsed = ref(false);
import { ToolViewLeftMenu } from '@/api/mock_static'

const iconName = computed(() => (collapsed.value ? 'chevron-right-double' : 'chevron-left-double'));
const changeCollapsed: ButtonProps['onClick'] = () => {
    collapsed.value = !collapsed.value;
};

</script>

<style lang="scss" scoped>
.layout-container {
    display: flex;
    min-height: 100vh;
}

.sidebar-menu {
    border: 1px solid #d4e4fc;
    border-radius: 5px;

    .logo-container {
        display: flex;
        align-items: center;
        margin: 0 auto;
        gap: 10px;
    }
}

.main-content {
    flex: 1;
}
</style>